import React from 'react';
import { Formik, Form, Field } from 'formik';
import AppBar from '../components/AppBar';
import { signUpAsCustomer, signUpAsBusiness, signUpAsDeliverer } from '../api/auth'

class RegisterForm extends React.Component {
    render() {
        return (
            <div className="container">
                <legend>注册饿了团</legend>
                <ul className="nav nav-tabs" role="tablist">
                    <li className="nav-item"><a className="nav-link active" data-toggle="tab" href="#cc">我是顾客</a></li>
                    <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#cb">我是商家</a></li>
                    <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#cd">我是配送员</a></li>
                </ul>

                <div className="tab-content">
                    <div className="container tab-pane active" id="cc">
                        <Formik
                            onSubmit={(value, actions) => {
                                // 以顾客身份注册
                                signUpAsCustomer(value.displayname, value.phone, value.pwd)
                                actions.setSubmitting(false)
                            }}
                            render={({ errors, status, touched, isSubmitting }) => (
                                <Form>
                                    <div className="form-group">
                                        <label htmlFor="c-displayname">昵称</label>
                                        <Field className="form-control" id="c-displayname" name="displayname" type="text" required />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="c-phone">手机号</label>
                                        <Field className="form-control" id="c-phone" name="phone" type="tel" required />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="c-pwd">密码</label>
                                        <Field className="form-control" id="c-pwd" name="pwd" type="password" required />
                                    </div>
                                    <button type="submit" className="btn btn-lg btn-block btn-danger" disabled={isSubmitting}>注册</button>
                                </Form>
                            )}
                        />

                    </div>
                    <div className="container tab-pane fade" id="cb">
                        <Formik
                            onSubmit={(value, actions) => {
                                signUpAsBusiness(value.phone, value.pwd)
                                actions.setSubmitting(false)
                            }}
                            render={({ errors, status, touched, isSubmitting }) => (
                                <Form>
                                    <div className="form-group">
                                        <label htmlFor="b-phone">手机号</label>
                                        <Field className="form-control" id="b-phone" name="phone" type="tel" required />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="b-pwd">密码</label>
                                        <Field className="form-control" id="b-pwd" name="pwd" type="password" required />
                                    </div>
                                    <button type="submit" className="btn btn-lg btn-block btn-danger" disabled={isSubmitting}>注册</button>
                                </Form>
                            )}
                        />
                    </div>
                    <div className="container tab-pane fade" id="cd">
                        <Formik
                            onSubmit={(value, actions) => {
                                signUpAsDeliverer(value.phone, value.pwd, value.name, value.hid)
                                actions.setSubmitting(false)
                            }}
                            render={({ errors, status, touched, isSubmitting }) => (
                                <Form>
                                    <div className="form-group">
                                        <label htmlFor="d-phone">手机号</label>
                                        <Field className="form-control" id="d-phone" name="phone" type="tel" required />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="d-pwd">密码</label>
                                        <Field className="form-control" id="d-pwd" name="pwd" type="password" required />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="d-name">真实姓名</label>
                                        <Field className="form-control" id="d-name" name="name" type="text" required />
                                    </div>
                                    <div className="form-group">
                                        <label htmlFor="d-hid">健康证号</label>
                                        <Field className="form-control" id="d-hid" name="hid" type="text" required />
                                    </div>
                                    <button type="submit" className="btn btn-lg btn-block btn-danger" disabled={isSubmitting}>注册</button>
                                </Form>
                            )}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

class Register extends React.Component {
    render() {
        return (
            <div>
                <AppBar></AppBar>
                <div className="container">
                    <RegisterForm></RegisterForm>
                </div>
            </div>
        );
    }
};

export default Register;